import Image from "next/image"

const faculty = [
  {
    name: "徐军",
    title: "国家二级心理咨询师",
    credentials: [
      "湖南省家庭教育研究会理事",
      "中国心理卫生协会",
      "注册心理咨询师",
      "国家婚姻家庭咨询师",
      "职业资格考评员",
    ],
    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-HszAtQbGfQeuN85uuE6kpbiurRlE8h.png",
  },
  {
    name: "岳晓东",
    title: "中国著名心理学家",
    credentials: [
      "哈佛大学心理学博士",
      "中国儿童中心顾问研究员",
      "香港城市大学教授",
      "首都师范大学特聘教授",
      "香港心理学会",
      "辅导分会督导会长",
    ],
    image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-0zP3dl5iy0nTIXLB6dpKaaIuH6AnV9.png",
  },
]

export default function Faculty() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-12">师资介绍</h2>
        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {faculty.map((member) => (
            <div key={member.name} className="flex flex-col">
              <div className="relative h-[400px] mb-4">
                <Image
                  src={member.image || "/placeholder.svg"}
                  alt={member.name}
                  fill
                  className="object-cover rounded-t-lg"
                />
              </div>
              <div className="bg-accent p-6 rounded-b-lg">
                <h3 className="text-white text-xl font-bold mb-2">{member.name}</h3>
                <p className="text-white/90 font-medium mb-4">{member.title}</p>
                <ul className="space-y-2">
                  {member.credentials.map((credential, index) => (
                    <li key={index} className="text-white/80 text-sm">
                      {credential}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

